<template>
  <view class="tab-bar">
    <view 
      v-for="(item, index) in list" 
      :key="index"
      class="tab-bar-item"
      :class="{ active: selected === index }"
      @tap="switchTab(index, item.pagePath)"
    >
      <text class="bi" :class="item.icon"></text>
      <text class="tab-bar-text">{{ item.text }}</text>
    </view>
  </view>
</template>

<script>
Component({
  data: {
    selected: 0,
    color: "#7A7E83",
    selectedColor: "#981f23",
    list: [
      {
        pagePath: "/pages/index/index",
        text: "首页",
        icon: "bi-house"
      },
      {
        pagePath: "/pages/shop/index",
        text: "商城",
        icon: "bi-shop"
      },
      {
        pagePath: "/pages/ar/index",
        text: "AR儺面",
        icon: "bi-camera"
      },
      {
        pagePath: "/pages/culture/index",
        text: "文化",
        icon: "bi-book"
      },
      {
        pagePath: "/pages/user/index",
        text: "我的",
        icon: "bi-person"
      }
    ]
  },
  methods: {
    switchTab(index, url) {
      this.setData({
        selected: index
      });
      wx.switchTab({
        url
      });
    }
  }
});
</script>

<style>
.tab-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100rpx;
  background: white;
  display: flex;
  padding-bottom: env(safe-area-inset-bottom);
}

.tab-bar-item {
  flex: 1;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.tab-bar-item.active {
  color: #981f23;
}

.tab-bar-text {
  font-size: 20rpx;
}
</style> 